<template>
  <div>
    <basic-container>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        <el-breadcrumb-item> 书籍管理 </el-breadcrumb-item>
        <el-breadcrumb-item> 章节管理列表 </el-breadcrumb-item>
      </el-breadcrumb>
    </basic-container>
    <basic-container>
      <avue-crud
        ref="crud"
        :data="data"
        v-model="form"
        :option="option"
        :page.sync="page"
        @on-load="getList"
        @refresh-change="refreshChange"
        @search-reset="from = {}"
        @search-change="searchChange"
        @row-update="rowUpdate"
      >
      <template slot-scope="scope" slot="menuLeft">
           <!-- <el-button
            type="primary"
            size="small"
            plain
            @click="importBooksBtn()"
            >新增章节</el-button
          > -->
          <div class="chap_upload_box">
            <el-upload
              class="upload-demo"
              :action="myAction"
              :on-change="changeFile"
              :on-success="successFile"
              accept=".txt"
              :show-file-list='false'
              ref="myUpload"
              >
              <el-button
                type="primary"
                plain
                >新增章节</el-button
              > 
            </el-upload>
          </div>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { getChapterListByBookId, getAdditionalChapter } from "@/api/cat/book";
import { common } from "@/api/cat/httpRequest";
import { catUrl } from "@/config/env";
import { appBookChapter as baseURL } from "@/api/cat/baseUrls";

export default {
  data() {
    return {
       page: {
        total: 0,
        pageSize: 10,
        // pageSizes:[1,2,3]
      },
      type: true,
      params: {},
      data: [],
      form: {},
      excelBtn: true,
      option: {
        addBtn: false,
        editBtn: true,
        viewBtn: false,
        delBtn: false,
        searchBtn: true,
        refreshBtn: true,
        border: true,
        column: [
          {
            label: "章节id",
            prop: "content_id",
            type: "input",
            span: "章节id",
            gutter: "id",
            search: true,
            addDisplay: false,
           
            readonly: true,
          },
          {
            label: "章节名称",
            prop: "title",
            type: "input",
            search: false,
         
            rules: [
              {
                required: true,
                message: "章节名称必须填写",
              },
            ],
          },
          {
           label: "章节内容",
            prop: "content",
            type: "textarea",
            hide: true,
            search: false,
            span: 24,
            rules: [
              {
                required: true,
                message: "章节内容必须填写",
              },
            ],
          },
          {
            label: "章节字数",
            prop: "words_count",
            type: "input",
            editDisplay: false,
            addDisabled: true,
            editDisabled: true,
            search: false,
            required: true,
          },
          {
            label: "章节顺序",
            prop: "sort",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            editDisabled: true,
            search: false,
            required: true,
          },
          {
            label: "创建时间",
            prop: "create_time",
            type: "input",
            search: false,
            addDisplay: false,
            editDisplay: false,
            addDisabled: true,
            editDisabled: true,
            required: true,
          },
          {
            label: "最后操作信息",
            prop: "edit_time",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            addDisabled: true,
            editDisabled: true,
            readonly: true,
          },
        ],
      },
    };
  },
  created() {
    this.bookid = this.$route.query.bookid;
    this.getList();
  },
  computed: {
      myAction() {
				return this.catUrl + '/file/uploadFile';
			},
  },
  methods: {
    changeFile(file,fileList) {
      // console.log(file);
    },
  
    successFile(response, file, fileList) {
      let arr = response.source.split(".com/")[1]
        //发送请求获取数据
         let param = Object.assign(
      {
          fileUrl: arr,
          bookIdCh: this.bookid,
        },
        this.params
      );
      let res = getAdditionalChapter(param);
      setTimeout(item => {
        this.getList()
      }, 500)
      
      // console.log(arr)
      // console.log(this.bookid)
    },
    /**获取列表 */
    async getList() {
      this.loading = true;
      //封装参数
      let param = Object.assign(
        {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
          book_id: this.bookid,
        },
        this.params
      );
      //清空表格列表
      this.data = [];
      //发送请求获取数据
      let response = await getChapterListByBookId(param);
      //修改分页内容
      this.pages(response.data.source);
      //数据赋值
      let list = response.data.source.records;
      this.data = list;
      this.loading = false;
    },
    /**搜索方法 */
    searchChange(params, done) {
      this.condition = [];
      this.params = params;
      this.page.currentPage = 1;
      this.getList();
      if (done) done();
    },

    /**修改分页内容 */
    pages(data) {
      this.page.total = data.total;
      this.page.pageSize = data.size;
      this.page.currentPage = data.current;
    },
    /**刷新 */
    refreshChange() {
      this.getList();
    } ,
    /**修改 */
    async rowUpdate(row, index, done, loading) {
      let userInfo = this.$store.state.user.userInfo;
      row.editor = userInfo.username;
      row.edittime = new Date();
      let data = await common(baseURL.update, row, null, "POST");
      if (data == null) {
        loading();
        return;
      }
      this.getList();
      done();
    },
  },
};
</script>
<style scope>
.chap_upload_box .el-upload{
  border: none;
}
</style>